<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=LyndzsmxSHDLMYy651AI3XNgKu26Smtz"></script>
    <script src="./coor.js"></script>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%;}
    </style>
</head>
<body>
<div id="container"></div>
<script>
    window.onload = () => {
        const PolylineStyle = {strokeColor: "red", strokeWeight: 10, strokeOpacity: 1}
        const map = new BMapGL.Map("container", {
            minZoom: 5,
            maxZoom: 19
        })
        const point = new BMapGL.Point(115.472906,38.878489);
        map.centerAndZoom(point, 10);
        map.enableScrollWheelZoom(true)

        function dw (myp1, myp2) {
            return new Promise(resolve => {
                var driving = new BMapGL.DrivingRoute(map, ({
                    onSearchComplete: (results) => {
                        if (driving.getStatus() === BMAP_STATUS_SUCCESS){
                            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
                            resolve(pts)
                        }

                    }
                }),{renderOptions:{map:map,autoViewport:false}})
                // driving.setPolicy(BMAP_DRIVING_POLICY_HIGHWAY)
                driving.search(myp1, myp2)
            })
        }
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(涿州市)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "#8d38b7",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(徐水区)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "#0996f1",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(安国市)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "rgba(140,36,36,0.8)",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(涞源县)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "rgba(81,121,194,0.8)",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(定州市)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "rgba(229,49,17,0.8)",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(清苑区)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "rgba(229,49,17,0.8)",
        }));
        map.addDistrictLayer(new BMapGL.DistrictLayer({
            name: '(莲池区)',
            fillColor: 'transparent',
            fillOpacity: .0,
            strokeWeight: 2,
            strokeColor: "rgba(229,211,17,0.8)",
        }));
        // var polyline = new BMapGL.Polyline([], PolylineStyle);
        // const list = [{"lng":114.470096,"lat":38.8496},{"lng":114.469916,"lat":38.849557},{"lng":114.469369,"lat":38.84942},{"lng":114.468424,"lat":38.849166}]
        // const data = []
        // for (const item of list) {
        //     const point = new BMapGL.Point(item.lng, item.lat)
        //     data.push(point)
        //     map.addOverlay(new BMapGL.Marker(point))
        // }
        // polyline = new BMapGL.Polyline(data, PolylineStyle);
        // map.addOverlay(polyline)
        // 115.70492938554729经 39.03249141304755
        // 115.57901065466864经 39.077992933529906
        // 115.44779672570499经 39.07922795890891
        // 115.31828928303713经 39.07805004589872
        dw(new BMapGL.Point(115.44779672570499, 39.07922795890891), new BMapGL.Point(115.31828928303713, 39.07805004589872)).then(r =>{
            // 115.57899718008598经 39.077849390713645
            // 115.70495184318503经 39.03235828691902
            // 115.44746457122041经 39.0790424765719
            // 115.31819496095859经 39.077917006333905
            dw(new BMapGL.Point(115.31819496095859, 39.077917006333905), new BMapGL.Point(115.44746457122041, 39.0790424765719)).then(a => {
                const arr = [].concat(r, a)
                var polyline = new BMapGL.Polyline(arr, PolylineStyle);
                const list = []
                for (const item of arr) {
                    // console.log(item)
                    list.push({
                        lng: item.lng,
                        lat: item.lat
                    })
                }
                map.addOverlay(polyline);
                console.log(JSON.stringify(list))
            })
        })
    }

</script>
</body>
</html>
